@import (reference) 'config';

w-complexity-meter {

  complexity-message {
    color: @color-basic-500;

    &[type="warn"] {
      color: @color-warning-400;
    }

    &[type="success"] {
      color: @color-success-300;
    }
  }

  .complexity-meter {

    .messages-container {
      text-align: right;
    }

    &.not-secure.touched {
      .step.active {
        background-color: @color-error-500;
      }
    }

    &.warn {
      .step.active {
        background-color: @color-warning-400;
      }
    }

    &.success {
      .step.active {
        background-color: @color-success-300;
      }
    }

    .step-list {
      margin-top: 4px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .step {
        width: 9.5%;
        height: 3px;
        border-radius: @border-radius;
        background-color: @color-basic-200;
      }
    }
  }
}
